$highlight-theme: hexo-theme-config("codeblock.highlight_theme");
@import "theme";
@import "diff";

%code-block {
  font-family: $code-font-family;
  background: $highlight-background;
  color: $highlight-foreground;
  line-height: $font-size-smallest * 2;
  margin: $line-margin auto $line-margin;
}

%disable-user-select {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

code {
  font-family: $code-font-family;
  border-radius: $code-border-radius;
  padding: 2px 4px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

pre {
  @extend %code-block;
  overflow: auto;
  padding: 10px;

  code {
    background: none;
    color: $highlight-foreground;
    padding: 0;
    text-shadow: none;
  }
}

.highlight {
  @extend %code-block;
  font-size: $font-size-smallest;
  overflow: auto;

  *::selection {
    background: $highlight-selection;
  }

  pre {
    border: 0;
    margin: 0;
    padding: 6px 0;
  }

  table {
    border: 0;
    margin: 0;
    width: auto;
  }

  td {
    border: 0;
    padding: 0;
  }

  figcaption {
    position: relative;
    background: map-get($highlight-gutter, bg-color);
    color: map-get($highlight-gutter, color);
    line-height: 1em;
    margin: 0;
    padding: 0.5em;
    &::before,
    &::after {
      content: " ";
      display: table;
    }

    a {
      color: $highlight-foreground;
      position: absolute;
      right: 6px;

      &:hover {
        border-bottom-color: $highlight-foreground;
      }
    }
  }

  .marked {
    background: #f8e9c0;
    border-bottom: 0.05rem solid #ffe7ab;
    border-radius: 0.1rem;
    color: #3b4351;
    padding: 0.05rem 0.1rem 0;
  }

  .gutter pre {
    background: map-get($highlight-gutter, bg-color);
    color: map-get($highlight-gutter, color);
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
  }

  .code pre {
    background: $highlight-background;
    padding-left: 10px;
    width: 100%;
  }
}
.gutter {
  @extend %disable-user-select;
}

.gist table {
  width: auto;

  td {
    border: 0;
  }
}

pre {
  // For diff highlight
  .deletion {
    background: $highlight-deletion;
  }

  .addition {
    background: $highlight-addition;
  }

  .meta {
    color: $highlight-yellow;
    // @extend %disable-user-select;
  }

  .comment {
    color: $highlight-comment;
  }

  .variable,
  .attribute,
  .tag,
  .name,
  .regexp,
  .ruby .constant,
  .xml .tag .title,
  .xml .pi,
  .xml .doctype,
  .html .doctype,
  .css .id,
  .css .class,
  .css .pseudo {
    color: $highlight-red;
  }

  .number,
  .preprocessor,
  .built_in,
  .builtin-name,
  .literal,
  .params,
  .constant,
  .command {
    color: $highlight-orange;
  }

  .ruby .class .title,
  .css .rules .attribute,
  .string,
  .symbol,
  .value,
  .inheritance,
  .header,
  .ruby .symbol,
  .xml .cdata,
  .special,
  .formula {
    color: $highlight-green;
  }

  .title,
  .css .hexcolor {
    color: $highlight-aqua;
  }

  .function,
  .python .decorator,
  .python .title,
  .ruby .function .title,
  .ruby .title .keyword,
  .perl .sub,
  .javascript .title,
  .coffeescript .title {
    color: $highlight-blue;
  }

  .keyword,
  .javascript .function {
    color: $highlight-purple;
  }
}
